<template>
  <div class="customer-card">
    <CardTitle title="添加员工" @change="onChangeCardTitle">
      （已添加<span class="led"> {{ addNum }} </span>员工）
    </CardTitle>
    <el-tabs v-if="state.userList.length > 0" v-model="userId" class="demo-tabs" @tab-change="onChangeTab">
      <el-tab-pane v-for="(item, index) in state.userList" :key="index" :label="filterLabel(item)" :name="`${item.work_user_id}`">
        <div class="cont-box" v-if="item.work_user_id == userId">
          <BasicInfoUser type="staff" :data="item" />
          <div class="right-box">
            <el-tabs v-model="activeName1" class="demo-tabs" >
              <el-tab-pane label="互动轨迹" name="1">
                <List v-if="activeName1 == 1" maxHeight="260" :isLoading="isLoading" :sorter="state.sorter" :status="status" :dataList="state.dataList" @change="onChangeList" />
              </el-tab-pane>
              <el-tab-pane label="聊天记录" name="2">
                <ChatRecord ref="ChatRecordRef" v-if="activeName1 == 2" :custList="props.custList" :isCompany="props.isCompany" :ltType="0" :singleData="[]" :cust_id="route.query.id" :work_user_id="item.work_user_id" :groupData="[]" />
              </el-tab-pane>
              <el-tab-pane label="跟进记录" name="3">
                <FollowTable v-if="activeName1 == 3" :stepList="props.stepList" :work_user_id="item.work_user_id" followType="staff" />
              </el-tab-pane>
              <el-tab-pane label="红包记录" name="4">
                <RedPacketRecord v-if="activeName1 == 4" :work_user_id="item.work_user_id" :custList="props.custList" :isCompany="props.isCompany" />
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-empty v-else image="/static/noData.png" description="暂无数据"></el-empty>
  </div>
</template>

<script setup lang="ts">
  import ChatRecord from './ChatRecord.vue'
  import FollowTable from './FollowTable.vue'
  import RedPacketRecord from './RedPacketRecord.vue'
  import { defineProps, ref, reactive, computed } from 'vue'
  import { useRoute } from 'vue-router'

  import CardTitle from './CardTitle.vue'
  import List from './List.vue'
  import BasicInfoUser from './BasicInfoUser.vue'

  import { getEmployeeList, getCustomerDynamicList } from '@/api/customerCenter'

  const ChatRecordRef = ref({})
  const route = useRoute()
  const addNum = ref(0)
  interface State {
    time: string
    userList: any
    dataList: any
    sorter: { pageNum: number; pageSize: number; total: number }
  }

  const props = defineProps(['wxExternalUserid', 'stepList', 'isCompany', 'custList'])
  const isLoading = ref(false)
  const userId = ref('')
  const activeName1 = ref('1')
  const status = ref(1)
  const state: State = reactive({
    time: '',
    userList: [],
    dataList: [],
    sorter: {
      pageNum: 1,
      pageSize: 10,
      total: 0
    }
  })

  const filterLabel = (item: any) => {
    const { is_departure, is_distribution, work_user_name } = item
    if (is_departure == 1) {
      return `${work_user_name}(已离职)`
    } else if (is_distribution == 1) {
      return `${work_user_name}(分配员工)`
    } else {
      return work_user_name
    }
  }

  // 获取页面初始化数据
  const getData = () => {
    getEmployeeList({ cust_id: route.query.id, wx_external_userid: props.wxExternalUserid, platform: 1, select_time: state.time }).then((res: any) => {
      for (const item of res.add_num) {
        // 解决name是null导致tab栏为空白的问题
        item.work_user_name = String(item.work_user_name)
      }
      state.userList = res.add_num || []
      console.log(res, 111111111111)
      if (res.is_add_distribution == 1) {
        addNum.value = res.add_num.length
      } else {
        if (res.add_num.length > 0) {
          addNum.value = res.add_num.length - 1
        }
      }

      if (state.userList.length > 0) {
        userId.value = String(res.add_num[0].work_user_id) // 默认选取第一个
        getStaffTrackData('creat')
      }
    })
  }

  const getStaffTrackData = (t?: string) => {
    isLoading.value = true
    // 线上问题替换原先的 getStaffTrack 接口
    getCustomerDynamicList({ cust_id: route.query.id, work_user_id: parseInt(userId.value), type: 1, behaviour_time: state.time, page: state.sorter.pageNum, page_size: state.sorter.pageSize }).then((res: any) => {
      isLoading.value = false

      if (t === 'creat') {
        state.dataList = res.data
        state.sorter.total = res.total
      } else {
        state.dataList.push(...res.data)
      }
    })
  }

  const onChangeCardTitle = (e: any) => {
    state.time = e.join('~')
    state.sorter.pageNum = 1
    getData()
  }

  const onChangeTab = () => {
    state.sorter.pageNum = 1
    activeName1.value = '1'
    getStaffTrackData('creat')
  }

  const onChangeList = (e: any) => {
    state.sorter.pageNum = state.sorter.pageNum + 1
    getStaffTrackData()
  }
</script>

<style lang="scss" scoped>
  .customer-card {
    padding: 16px 20px;

    .cont-box {
      display: flex;
      justify-content: space-between;

      .left-box {
        flex: 0 0 310px;
        width: 310px;
      }
      .right-box {
        flex: auto;
        padding: 10px 20px;
        margin-left: 16px;
        background: #ffffff;
        border: 1px solid #eaeaea;
      }
    }
  }
</style>
